<template>
	<div style="padding: 10px">
		<div class="body">
			<department-view @selectDepartment="selectDepartment" @refreshDepartment="refreshDepartment"></department-view>
			<div class="user">
				<div class="btns">
					<el-cascader
						size="small"
						value="id" 
						placeholder="选择部门"
						:show-all-levels="false"
						v-model="departments"
						:options="departmentList"
						:props="selectProps"
						@change="changeDepartment"
						clearable></el-cascader>
					<el-input size="small" style="width: 180px;" placeholder="搜索人员" v-model="selectInfo.keyword" @keyup.enter.native="handleChangePage">
						<el-button slot="append" icon="el-icon-search" @click="handleChangePage"></el-button>
					</el-input>
					<el-button size="small" type="danger">批量删除</el-button>
					<el-button size="small" type="primary" @click="dialogStatus='create', showDialog=true" style="margin-left: 0px;">添加人员</el-button>
				</div>
				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" v-loading="loading"
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column label="姓名" width="120">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>
					<el-table-column prop="phone" label="手机号码">
					</el-table-column>
					<el-table-column prop="departmentName" label="部门">
					</el-table-column>
					<el-table-column label="状态" width="120">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.status === 1" type="success" effect="dark" size="mini">正常</el-tag>
							<el-tag v-else type="info" effect="dark" size="mini">停用</el-tag>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="220">
						<template slot-scope="scope">
							<el-button @click="openUserDetail(scope.row)" size="mini">详情</el-button>
							<el-button @click="changeStatus(scope.row)" v-if="scope.row.status === 1" type="info" size="mini">禁用</el-button>
							<el-button @click="changeStatus(scope.row)" v-else type="success" size="mini">启用</el-button>
							<el-popconfirm
								style="margin-left: 10px;"
							  confirm-button-text='确定'
							  cancel-button-text='取消'
							  icon="el-icon-info"
							  icon-color="red"
							  title="是否确定删除该用户？"
							  @confirm="deleteUser(scope.row)">
							  <el-button size="mini" type="danger" slot="reference">删除</el-button>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
				<div class="footer">
          <el-pagination @current-change="handleChangePage" :current-page.sync="page" :page-size="pageSize" layout="prev, pager, next" :total="total"></el-pagination>
        </div>
			</div>
		</div>
		<div v-if="showDialog">
			<user-dialog :showDialog="showDialog" :dialogStatus="dialogStatus" :userinfo="showUser" :departmentList="departmentList" :permissionList="permissionList" @refreshUser="refreshUser" @close="close"></user-dialog>
		</div>
		<el-drawer
			title="人员详情"
			:visible.sync="drawer"
			size="50%"
			:direction="'rtl'">
			<div class="user_detail">
				<div>
					<div class="title">姓名</div>
					<div class="content">{{ showUser.name || '' }}</div>
				</div>
				<div>
					<div class="title">手机号码</div>
					<div class="content">{{ showUser.phone || '' }}</div>
				</div>
				<div>
					<div class="title">部门</div>
					<div class="content">{{ showUser.departmentName || '' }}</div>
				</div>
				<div>
					<div class="title">权限范围</div>
					<div class="permission" v-for="(item, index) in showUser.pList" :key="index">
						<el-checkbox v-model="item.checked" disabled>{{ item.name }}</el-checkbox>
						<!-- <el-checkbox v-model="checked" disabled>施工票审批</el-checkbox> -->
					</div>
				</div>
				<div class="footer">
					<el-button type="primary" @click="update()" >编辑信息</el-button>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import DepartmentView from './department.vue'
	import UserDialog from './userDialog.vue'
	import { userPage, userDetail, userDelete, userChangeStatus, getPermission } from '@/api/usrs/index'
	export default {
		name: 'UserManage',
		components: {
			DepartmentView,
			UserDialog
		},
		data() {
			return {
				checked: true,
				drawer: false,
				showUser: {
					pList: []
				},
				name: '',
				selectInfo: {
					departmentId: null,
					keyword: ''
				},
				tableData: [],
				departmentList: [],
				multipleSelection: [],
				showDialog: false,
				dialogStatus: '',
				page: 1,
				pageSize: 10,
				total: 0,
				loading: false,
				selectProps: {
					value: 'id',
					checkStrictly: true
				},
				departments: [],
				permissionList: [],
			};
		},
		mounted() {
			this.handleChangePage()
			this.getPermission()
		},
		methods: {
			getPermission() {
        getPermission().then(res => {
					const { data } = res
					this.permissionList = data
				}).catch(error => {
					console.log(error)
				})
      },
			refreshDepartment(list) {
				this.selectInfo.departmentId = null
				this.departments = []
				this.departmentList = []
				this.departmentList = list
				this.pate = 1
				this.handleChangePage()
			},
			changeDepartment() {
				// console.log(this.departments)
				this.selectDepartment(this.departments.length > 0 ? this.departments[this.departments.length - 1] : null)
			},
			selectDepartment(id) {
				this.selectInfo.departmentId = id != null ? id : null
				this.pate = 1
				this.handleChangePage()
			},
			refreshUser() {
				this.handleChangePage()
			},
			handleChangePage() {
				this.loading = true
				let params = {...this.selectInfo, pageNum: this.page, pageSize: this.pageSize}
				userPage(params).then(res => {
					const { data } = res
					this.total = data.total
					this.tableData = data.list
					this.loading = false
				}).catch(error => {
					this.loading = false
					console.log(error)
				})
			},
			//更改用户状态
			changeStatus(row) {
				userChangeStatus({
					id: row.id,
					status: row.status === 1 ? 0 : 1 
				}).then(() => {
					this.handleChangePage()
				}).catch(error => {
					console.log(error)
				})
			},
			update() {
				this.dialogStatus = 'update'
				this.drawer = false
				this.showDialog = true
			},
			openUserDetail(user) {
				userDetail(user.id).then(res => {
					let list = []
					let pList = res.data.permissionIds
					this.permissionList.forEach(item=>{
						let obj = {...item}
						obj.checked = pList.indexOf(obj.id) != -1 ? true : false
						list.push(obj)
					})
					
					this.showUser = {...res.data, pList: list}
					this.drawer = true
				}).catch(error => {
					console.log(error)
				})
			},
			close() {
				this.showDialog = false
			},
			//选中用户
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			
			//删除用户
			deleteUser(user) {
				userDelete({id: user.id}).then(res => {
					this.handleChangePage()
				}).catch(error => {
					console.log(error)
				})
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.body {
		height: 100%;
		border: 1px solid rgb(230, 230, 230);
		display: flex;
	}

	.user {
		width: calc(100% - 300px);
		padding: 10px;
		border-left: 1px solid rgb(230, 230, 230);
		.btns {
			width: 560px;
			display: flex;
			float: right;
			justify-content: space-around;
		}
	}

	.btn {
		margin: 20px 20px 0 0;
		text-align: right;
	}
	.user_detail {
		margin: 0px 0 0 20px;
		>div {
			margin-bottom: 30px;
		}
		.title {
			margin: 10px 0;
			color: rgb(151, 151, 151);
		}
		.content {
			margin: 10px 0;
		}
		::v-deep .el-checkbox {
			width: 110px;
		}
	}
	.permission {
		display: inline-block;
		// align-items: center;
		margin-bottom: 20px;
		// >div:first-child {
		// 	width: 120px;
		// }
		// .title {
		// 	width: 100px;
		// 	margin-right: 20px;
		// 	text-align: right;
		// }
	}
	.footer {
    margin-top: 10px;
    text-align: center;
  }
</style>
